<!-- eslint-disable no-console -->
<!-- 质量管理模块 - 退料检验 -->
<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
import type { DictApi, RqcApi } from '#/api';

import { reactive } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { DictResp, getRqcList } from '#/api';

import delModal from './del-modal.vue';
import editModal from './edit-modal.vue';
// import {} from 'element-plus';
// 将字典数据添加到数组中;
const mes_qc_result = reactive<DictApi.SelectOption[]>([]);
const mes_rt_issue_status = reactive<DictApi.SelectOption[]>([]);
const mes_source_doc_type = reactive<DictApi.SelectOption[]>([]);
DictResp(['mes_qc_result', 'mes_rt_issue_status', 'mes_source_doc_type']).then(
  (res) => {
    // 将两个数组合并
    if (res.mes_qc_result) {
      mes_qc_result.push(...res.mes_qc_result);
      // const mesindex = mes_index_type.map((item) => ({ value: item.value }));
      // console.log(mesindex);
    }
    if (res.mes_rt_issue_status) {
      mes_rt_issue_status.push(...res.mes_rt_issue_status);
    }
    if (res.mes_source_doc_type) {
      mes_source_doc_type.push(...res.mes_source_doc_type);
    }
  },
);

const [EditModal, editmodalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: editModal,
  showConfirmButton: false,
  showCancelButton: false,
});
const [DelModal, delmodalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: delModal,
});

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入检验单编号',
      },
      fieldName: 'rqcCode',
      label: '检验单编号',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: mes_source_doc_type,
        placeholder: '请选择来源单据类型',
      },
      fieldName: 'sourceDocType',
      label: '来源单据类型',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入来源单据编号',
      },
      fieldName: 'sourceDocCode',
      label: '来源单据编号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入产品物料编码',
      },
      fieldName: 'itemCode',
      label: '产品物料编码',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入产品物料名称',
      },
      fieldName: 'itemName',
      label: '产品物料名称',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入批次号',
      },
      fieldName: 'batchCode',
      label: '批次号',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: mes_qc_result,
        placeholder: '请选择检测结论',
      },
      fieldName: 'checkResult',
      label: '检测结论',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入检测人员',
      },
      fieldName: 'nickName',
      label: '检测人员',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '搜索',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RqcApi.Row> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      align: 'left',
      field: 'rqcId',
      title: '',
      type: 'checkbox',
      width: 50,
    },
    { field: 'rqcCode', title: '检验单编号' },
    { field: 'rqcName', title: '检验单名称' },
    {
      field: 'sourceDocType',
      title: '来源单据类型',
      formatter: ({ cellValue }) => {
        const item = mes_source_doc_type.find(
          (item) => item.value === cellValue,
        );
        return item?.label || '';
      },
    },
    { field: 'sourceDocCode', title: '来源单据编号' },
    { field: 'itemCode', title: '物资编码' },
    { field: 'itemName', title: '物资名称' },
    { field: 'specification', title: '规格型号' },
    { field: 'unitName', title: '单位' },
    { field: 'batchCode', title: '批次号' },
    {
      field: 'checkResult',
      title: '检测结论',
      formatter: ({ cellValue }) => {
        const item = mes_qc_result.find((item) => item.value === cellValue);
        return item?.label || '';
      },
    },
    { field: 'inspectDate', title: '检测日期' },
    { field: 'nickName', title: '检测人员' },
    {
      field: 'status',
      title: '单据状态',
      formatter: ({ cellValue }) => {
        const item = mes_rt_issue_status.find(
          (item) => item.value === cellValue,
        );
        return item?.label || '';
      },
    },
    { slots: { default: 'action' }, title: '操作' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const res = await getRqcList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });
        return {
          total: res.total,
          items: res.rows,
        };
      },
    },
  },

  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    refresh: true,
  },
};

const gridEvents: VxeGridListeners = {
  checkboxChange({ row }) {
    console.log(row);
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

function editRowEvent(row: RqcApi.Row) {
  // console.log(row);
  editmodalApi
    .setState({
      title: '修改检测项',
    })
    .setData({ row })
    .open();
  gridApi.grid?.setEditRow(row);
}
function deleteRowEvent(row: RqcApi.Row) {
  console.log(row.rqcId);
  // console.log(row);
  delmodalApi
    .setData(`是否确认删除检测项编号为"${row.rqcId}"的数据项？`)
    .open();
  gridApi.grid?.setEditRow(row);
}
</script>

<template>
  <div>
    <EditModal />
    <DelModal />
    <Grid>
      <template #action="{ row }">
        <VxeButton
          mode="text"
          icon="vxe-icon-signature"
          @click="editRowEvent(row)"
          status="primary"
        >
          修改
        </VxeButton>
        <VxeButton
          icon="vxe-icon-delete"
          mode="text"
          @click="deleteRowEvent(row)"
          status="error"
        >
          删除
        </VxeButton>
      </template>
    </Grid>
  </div>
</template>
